<template>
  <div>
    <el-dialog
      :title="info.type == 'add' ? '新增菜单' : '编辑菜单'"
      :visible.sync="info.isShow"
      width="60%"
    >
      <span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="轮播图名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="轮播图图片" prop="img">
            <!-- action 上传的地址 -->
            <!-- auto-upload 是否自动上传 -->
            <!-- list-type 组件的形式，照片墙 -->
            <!-- on-preview 预览图片时，执行的函数 -->
            <!-- on-remove 移除时，处理的函数 -->
            <!-- on-change 文件修改时执行的函数 -->
            <!-- file-list 历史文件列表 -->
            <el-upload
              action="#"
              :auto-upload="false"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="fileList"
              :limit='1'
              :on-exceed='limtimg'
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { BannerAdd, BannerEdit } from "@/api.js";
export default {
  props: ["info"],
  data() {
    return {
      //历史图片列表
      fileList: [],
      ruleForm: {
        title: "",
        img: "",
        status: 1,
      },
      rules: {
        title: [
          { required: true, message: "请输入菜单标题", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //删除图片
    handleRemove() {
      this.ruleForm.img = "";
    },
    //修改文件
    handleChange(file) {
      this.ruleForm.img = file.raw;
    },
    limtimg(){
      this.$message({
          message: '只能上传一个图',
          type: 'warning'
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          delete this.ruleForm.description
          delete this.ruleForm.first_cateid
          delete this.ruleForm.second_cateid
          let fd = new FormData();
          for (const key in this.ruleForm) {
            fd.append(key, this.ruleForm[key]);
          }
          console.log(this.ruleForm);
          //添加
          if (this.info.type === "add") {
            let res = await BannerAdd(fd);
            //修改
          } else {
            let res = await BannerEdit(fd);
          }
          this.info.isShow = false;
          this.$emit("update");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    setValue(info) {
      this.fileList = [];
      this.ruleForm = { ...info };
      console.log(this.ruleForm);
      if (this.ruleForm.img) {
        this.fileList.push({
          name: "u-admin",
          url: this.$host + this.ruleForm.img,
        });
      }
    },
  },
};
</script>
<style scoped>
</style>